@mixin top {
  $d: .4s;
  $d2: .2s;

  &-enter-from {
    
  }
  &-leave-to {
    opacity: 0;
  }

  &-enter-active {
    transition: opacity $d;
    overflow-y: hidden;
  }
  &-leave-active {
    transition: opacity $d2;
    overflow-y: hidden;
  }

  &-enter-active>:first-child {
    animation: dropdownTopIn $d cubic-bezier(0, 0.95, 0.71, 1);
  }
  &-leave-active>:first-child {
    animation: dropdownTopOut $d;
  }
}

@mixin bottom {
  $d: .4s;
  $d2: .2s;

  &-enter-from{
    
  }
  &-leave-to {
    opacity: 0;
  }

  &-enter-active {
    transition: opacity $d;
    overflow-y: hidden;
  }
  &-leave-active {
    transition: opacity $d2;
    overflow-y: hidden;
  }

  &-enter-active>:first-child {
    animation: dropdownBottomIn $d cubic-bezier(0, 0.95, 0.71, 1);
  }
  &-leave-active>:first-child {
    animation: dropdownBottomOut $d;
  }
}

@each $animal in left,right,bottom,bottomRight,rightBottom,bottomLeft,leftBottom {
  .x-dropdown-placement-#{$animal} {
    @include bottom();
  }
}

@each $animal in top,topLeft,leftTop,topRight,rightTop {
  .x-dropdown-placement-#{$animal} {
    @include top();
  }
}

@mixin keyframes($name, $p) {
  $opacity: 1;
  @keyframes #{'dropdown' + $name + 'In'} {
    0% {
      opacity: $opacity;
      transform: translateY($p);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes #{'dropdown' + $name + 'Out'} {
    0% {
      
    }
    100% {
      opacity: 0;
      transform: translateY($p);
    }
  }
}

@include keyframes('Bottom', -15%);
@include keyframes('Top', 15%);